<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>tabs使用</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
		<style>
			.tablist-left {
				width: 25%;
				display: inline-block;
			}
			.tablist-content {
				width: 60%;
				display: inline-block;
				vertical-align: top;
				margin-left: 5%;
			}
		</style>
		<script src="js/jquery1.10.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.mobile-1.4.5.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div data-role="page" data-fullscreen="true" id="one" data-theme="b">

			<div data-role="tabs" id="tabs">
				<div data-role="navbar">
					<ul>
						<li><a href="#one" data-ajax="false">one</a>
						</li>
						<li><a href="#two" data-ajax="false">two</a>
						</li>
						<li><a href="ajax-content-ignore.html" data-ajax="false">three</a>
						</li>
					</ul>
				</div>
				<div id="one" class="ui-body-d ui-content">
					<h1>First tab contents</h1>
				</div>
				<div id="two">
					<ul data-role="listview" data-inset="true">
						<li><a href="#">Acura</a>
						</li>
						<li><a href="#">Audi</a>
						</li>
						<li><a href="#">BMW</a>
						</li>
						<li><a href="#">Cadillac</a>
						</li>
						<li><a href="#">Ferrari</a>
						</li>
					</ul>
				</div>
			</div>

			<h2>Use inset listview for tabs</h2>
			<div data-role="tabs">
				<ul data-role="listview" data-inset="true" class="tablist-left">
					<li><a href="#one" data-ajax="false">one</a>
					</li>
					<li><a href="#two" data-ajax="false">two</a>
					</li>
					<li><a href="ajax-content-ignore.html" data-ajax="false">three</a>
					</li>
				</ul>
				<div id="one" class="ui-body-d tablist-content">
					<h1>First tab contents</h1>
				</div>
				<ul id="two" class="tablist-content" data-role="listview" data-inset="true">
					<li><a href="#">Acura</a>
					</li>
					<li><a href="#">Audi</a>
					</li>
					<li><a href="#">BMW</a>
					</li>
					<li><a href="#">Cadillac</a>
					</li>
					<li><a href="#">Ferrari</a>
					</li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed">
				<p>weibu</p>
			</div>
		</div>

	</body>

</html>